<template>
    <el-table
        :data="paginatedData"
        :row-key="(row) => row.travelId"
        stripe
        style="width: 100%"
        :height="tableHeight"
    >
        <el-table-column type="expand">
            <template #default="props">
                <div class="expand-wrapper">
                    <h3 class="expand-title">预支款申请详情</h3>
                    <el-descriptions
                        :model="props.row.info"
                        column="2"
                        border
                        label-width="150px"
                        class="expand-descriptions"
                    >
                        <el-descriptions-item label="姓名">
                            {{ props.row.userName }}
                        </el-descriptions-item>
                        <el-descriptions-item label="工号">
                            {{ props.row.userId }}
                        </el-descriptions-item>
                        <el-descriptions-item label="联系方式">
                            {{ props.row.userPhone }}
                        </el-descriptions-item>
                        <el-descriptions-item label="邮箱">
                            {{ props.row.userEmail }}
                        </el-descriptions-item>
                        <el-descriptions-item label="开始日期">
                            {{ props.row.startDate }}
                        </el-descriptions-item>
                        <el-descriptions-item label="结束日期">
                            {{ props.row.endDate }}
                        </el-descriptions-item>
                        <el-descriptions-item label="出差原因" span="2">
                            <el-input
                                v-model="props.row.travelReason"
                                type="textarea"
                                rows="3"
                                readonly
                            />
                        </el-descriptions-item>
                        <el-descriptions-item label="出差详情" span="2">
                            <el-input
                                v-model="props.row.travelDetail"
                                type="textarea"
                                rows="3"
                                readonly
                            />
                        </el-descriptions-item>
                        <el-descriptions-item label="餐饮费用">
                            {{ props.row.foodCost }} ¥
                        </el-descriptions-item>
                        <el-descriptions-item label="交通费用">
                            {{ props.row.transportCost }} ¥
                        </el-descriptions-item>
                        <el-descriptions-item label="住宿费用">
                            {{ props.row.hotelCost }} ¥
                        </el-descriptions-item>
                        <el-descriptions-item label="预算总费用">
                            {{ props.row.budget }} ¥
                        </el-descriptions-item>
                        <el-descriptions-item label="申请预支款" span="2">
                            {{ props.row.advancePayment }} ¥
                        </el-descriptions-item>
                        <el-descriptions-item label="预算详情" span="2">
                            <el-input
                                v-model="props.row.costDetail"
                                type="textarea"
                                rows="3"
                                readonly
                            />
                        </el-descriptions-item>
                        <el-descriptions-item label="预支款金额" span="2">
                            <el-input
                                v-model="props.row.payment"
                                placeholder="填写预支款金额"
                                style="width: 95%"
                                readonly
                            />
                            ¥ </el-descriptions-item
                        >3
                        <el-descriptions-item label="拒绝原因" span="2">
                            <el-input
                                v-model="props.row.advanceRejection"
                                type="textarea"
                                rows="5"
                                placeholder="填写拒绝原因，批准则此项不填"
                                readonly
                            />
                        </el-descriptions-item>
                    </el-descriptions>
                </div>
            </template>
        </el-table-column>

        <el-table-column label="User ID" prop="userId" show-overflow-tooltip>
            <template #header>
                <el-row>
                    <el-col :span="24">
                        <label>工号:</label>
                        <el-input
                            v-model="filters.userId"
                            size="small"
                            placeholder="搜索工号"
                            clearable
                        />
                    </el-col>
                </el-row>
            </template>
        </el-table-column>

        <!-- user Name -->
        <el-table-column label="Name" prop="userName" show-overflow-tooltip>
            <template #header>
                <el-row>
                    <el-col :span="24">
                        <label>姓名:</label>
                        <el-input
                            v-model="filters.userName"
                            size="small"
                            placeholder="搜索姓名"
                            clearable
                        />
                    </el-col>
                </el-row>
            </template>
        </el-table-column>

        <!-- Travel Date -->
        <el-table-column
            label="startDate"
            prop="startDate"
            show-overflow-tooltip
        >
            <template #header>
                <el-row>
                    <el-col :span="24">
                        <label>出差日期:</label>
                        <el-input
                            v-model="filters.startDate"
                            size="small"
                            placeholder="搜索出差日期"
                            clearable
                        />
                    </el-col>
                </el-row>
            </template>
        </el-table-column>

        <!-- Budget -->
        <el-table-column label="Budget" prop="budget" show-overflow-tooltip>
            <template #header>
                <el-row>
                    <el-col :span="24">
                        <label>预算:</label>
                        <el-input
                            v-model="filters.budget"
                            size="small"
                            placeholder="搜索预算"
                            clearable
                        />
                    </el-col>
                </el-row>
            </template>
        </el-table-column>

        <!-- Advance Status -->
        <el-table-column
            label="Advance Status"
            prop="advanceStatusName"
            show-overflow-tooltip
        >
            <template #header>
                <el-row>
                    <el-col :span="24">
                        <label>状态:</label>
                        <el-input
                            v-model="filters.advanceStatusName"
                            size="small"
                            placeholder="搜索预支款申请状态"
                            clearable
                        />
                    </el-col>
                </el-row>
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页控制 -->
    <div class="demo-pagination-block">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 15, 20, 30, 50]"
            :size="size"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="filteredUserTravelApply.length"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
    </div>
</template>

<script setup>
import {
    ref,
    computed,
    onMounted,
    onBeforeUnmount,
    getCurrentInstance,
} from "vue";
import { useUserStore } from "@/store/User";
const { proxy } = getCurrentInstance();
const userStore = useUserStore();

const tableHeight = ref("80vh");

const currentPage = ref(1);
const pageSize = ref(20);
const total = ref(0);
const size = ref("default");
const background = ref(true);

const handleSizeChange = (val) => {
    pageSize.value = val;
    // getApproveAdvanceRecord();
};

const handleCurrentChange = (val) => {
    currentPage.value = val;
    // getApproveAdvanceRecord();
};

const updateTableHeight = () => {
    const offsetHeight = 160;
    tableHeight.value = `${window.innerHeight - offsetHeight}px`;
};

onBeforeUnmount(() => {
    window.removeEventListener("resize", updateTableHeight);
});

const filters = ref({
    userId: "",
    userName: "",
    startDate: "",
    budget: "",
    advanceStatusName: "",
});

const userTravelApply = ref([]);

const getApproveAdvanceRecord = async () => {
    let result = await proxy.Request({
        url: proxy.Api.getApproveAdvanceRecord,
        params: {
            userId: userStore.getUser().userId,
            pageNo: currentPage.value,
            pageSize: pageSize.value,
        },
    });

    if (!result) {
        return;
    }

    userTravelApply.value = result.data.list;
    // pageSize.value = result.data.pageSize;
    // currentPage.value = result.data.pageNo;
    total.value = result.data.totalCount;
};

const filteredUserTravelApply = computed(() => {
    return userTravelApply.value.filter((data) => {
        return (
            (!filters.value.userId ||
                (data.userId &&
                    data.userId
                        .toLowerCase()
                        .includes(filters.value.userId.toLowerCase()))) &&
            (!filters.value.userName ||
                (data.userName &&
                    data.userName
                        .toLowerCase()
                        .includes(filters.value.userName.toLowerCase()))) &&
            (!filters.value.startDate ||
                (data.startDate &&
                    data.startDate
                        .toLowerCase()
                        .includes(filters.value.startDate.toLowerCase()))) &&
            (!filters.value.budget ||
                (data.budget &&
                    data.budget
                        .toString()
                        .toLowerCase()
                        .includes(filters.value.budget.toLowerCase()))) &&
            (!filters.value.advanceStatusName ||
                (data.advanceStatusName &&
                    data.advanceStatusName
                        .toLowerCase()
                        .includes(
                            filters.value.advanceStatusName.toLowerCase()
                        )))
        );
    });
});

const paginatedData = computed(() => {
    const startIndex = (currentPage.value - 1) * pageSize.value;
    return filteredUserTravelApply.value.slice(
        startIndex,
        startIndex + pageSize.value
    );
});

onMounted(() => {
    updateTableHeight();
    window.addEventListener("resize", updateTableHeight);
    getApproveAdvanceRecord();
});
</script>

<style lang="less" scoped>
label {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
    text-align: left;
}

.demo-pagination-block {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
    text-align: right;
}

.expand-wrapper {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin: 10px 0;
}

.expand-title {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}

.expand-descriptions {
    max-width: 800px;
    margin: 0 auto;
}

.expand-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}
</style>
